<template>
  <div class="login">
    <div class="login-box">
        <div class="login-pic">
            <img src="@/assets/login/login-l.png" alt="">
        </div>
        <div class="login-form">
            <div class="logo">
                <img src="@/assets/login/logo.png" alt="">
            </div>
            <el-form :rules="rules" :model="rulesForm" ref="loginForm">
                <el-form-item prop="name">
                    <el-input v-model="rulesForm.name" placeholder="账号"></el-input>
                    <i class="el-icon-user icon"></i>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="rulesForm.password" placeholder="密码"></el-input>
                    <i class="el-icon-unlock icon"></i>
                </el-form-item>
                <el-button @click="handleLogin" class="btn" type="primary" :loading="loginLoading">登录</el-button>
            </el-form>
        </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/employee'
export default {
  name: 'LoginIndex',
  data () {
    return {
      loginLoading: false,
      rulesForm: {
        name: 'admin',
        password: '123456'
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码必须在6位以上', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(async valid => {
        if (!valid) return
        this.loginLoading = true
        const res = await login({
          username: this.rulesForm.name,
          password: this.rulesForm.password
        })
        if (res.code === 1) {
          console.log(res)
          this.$store.commit('user/setToken', res.data.token)
          this.$store.commit('user/setUserInfo', res.data)
          this.$router.push('/')
        } else {
          this.$message.error(res.msg)
        }
        this.loginLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
    background-color: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    width: 1000px;
    height: 474px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;

    .login-pic {
        flex: 1.5;
    }

    .login-form {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .logo {
            width: 149px;
            height: 38px;
            margin-bottom: 40px;
        }

        .el-input {
            position: relative;
        }

        ::v-deep .el-input__inner {
            border: 0;
            border-bottom: 1px solid #e9e9e8;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            padding: 0 25px;
        }

        .icon {
            position: absolute;
            left: 2px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #bac0cd;
        }

        .btn {
            background-color: #ffc200;
            color: #333;
            border: 0;
            outline: 0;
            width: 100%;
            border-radius: 100vh;
            font-size: 12px;
            margin-top: 20px;
            cursor: pointer;
            padding: 9px;
        }

        .btn:hover {
            color: #fff;
        }
    }
}
</style>
